import { useModel } from "umi";
import { Alert, Tag, Upload, Modal } from "antd";
import { PlusOutlined } from "@ant-design/icons";

const MultiFiles = () => {
    const { annexFiles, fileRemove, filePreview, closePreview, previewShow, previewImage, beforeUpload, maxFiles } = useModel("upload.files");

    return (
        <div style={{ padding: 20 }}>
            <Alert
                message={
                    <div>
                        提醒： 最多只能上传{" "}
                        <Tag bordered={false} color="blue" style={{ margin: 0 }}>
                            {maxFiles || 10}
                        </Tag>{" "}
                        个文件
                    </div>
                }
                type="warning"
                style={{ marginBottom: 20 }}
            />
            <Upload multiple listType="picture-card" fileList={annexFiles} accept="image/*" beforeUpload={beforeUpload} onRemove={fileRemove} onPreview={filePreview}>
                {annexFiles?.length < maxFiles && (
                    <div>
                        <PlusOutlined />
                        <div style={{ marginTop: 8 }}>上传</div>
                    </div>
                )}
            </Upload>

            <Modal open={previewShow} footer={null} onCancel={closePreview}>
                <img alt="加载" style={{ width: "100%", height: "100%" }} src={previewImage} />
            </Modal>
        </div>
    );
};

export default MultiFiles;
